<template>
	<view class="max_box">
		<u-navbar autoBack="true" :leftIconColor="'$uni-text-color'" :title="'设置打卡地址'" :bgColor="state.bgColor" :titleStyle="state.titleStyle" :placeholder="true" :fixed="false">
        </u-navbar>
		<map class="map" :show-compass="true" :longitude="lon" :latitude="lat" :markers="covers" :circles="circles">
		
		</map>
		<!-- 操作盒子 -->
		<view class="operating_box">
			<!-- 位置 -->
			<!-- <view class="area location_box">
				<view class="site">{{ locationAddress }}</view>
				<view class="alter" @tap="alter">
					<view class="alter_button">更改</view>
				</view>
			</view> -->
			<view class="input_search">
				<u-icon class="icon" name="search" color="#5c5c5c" size="24"></u-icon>
				<up-input type="text" class="up-input" placeholder="请输入城市名称"  border="none"  v-model="locationAddress"></up-input>
				<view class="button" @tap="alter">更改</view>
			</view>
			<!-- 打卡有效范围 -->
			<view class="area scope">
				<view class="scope_title">打卡有效范围</view>
				<view class="scope_select" @tap="show_range = true"> <text>{{ clock_range }}米</text><u-icon name="arrow-right" color="#555555" size="16"></u-icon> </view>
			</view>
		</view>
	</view>

	<!-- 底部提交按钮 -->
	<view>
		<s-button @netWork="confirmLocation" :text="text"></s-button>
	</view>
	<!-- 打卡范围 -->
	<u-picker :show="show_range" :columns="columns_data" @confirm="confirm_range" @cancel="cancel_range" @close="close_range"></u-picker>
</template>

<script setup>
	// 	import QQMapWX from './qqmap-wx-jssdk.js'
	// 	var qqmapsdk, handleRegionchangeTimmer;
	import { ref, reactive } from 'vue';
	import { onLoad, onShow,onUnload } from '@dcloudio/uni-app';
	import sheep from '@/sheep'
	import { getLocation,getRequest} from '@/utils/locationUtils';
	onLoad((options) => {
		getLocation().then((res) => {  
			let obj ={}
			obj.latitude = res.latitude;
			obj.longitude = res.longitude;
			let location = res.latitude + ',' + res.longitude
			obj.id = 1,
			obj.fillColor =  '#87CEFA50',
			obj.radius = 100
			obj.strokeWidth=2,
			obj.color='#87CEFAFF',
			obj.width = 20,
			obj.height = 30,
			lat.value = res.latitude
			lon.value = res.longitude
			circles.value.push(obj)
			covers.value.push(obj)
			getRequest(location).then((ret) =>{
				locationAddress.value = ret.data.result.address;   // 详细地址
				locationLat.value = ret.data.result.location.lat // 纬度
				locationLon.value = ret.data.result.location.lng // 经度
			})
            }).catch((error) => {  
              sheep.$helper.toast('获取经纬度失败')
                // 如果 Promise 拒绝，则捕获错误  
            }); 
		watchEvent()
	})

	// 页面销毁的时候将监听事件清掉 
	onUnload(() => {
    // uni.$off('receive'); // 清除名为'receive'的事件监听器
	})

	// const gauge_point = ref(false)
	const watchEvent = () => {
		uni.$on('receive',(e) => {
			locationAddress.value = e.locationAddress
			locationLat.value = e.locationLat
			locationLon.value = e.locationLon
			// circles.value = e.circles
			// covers.value = e.covers
			// gauge_point.value = e.gauge_point
		})
	}

	const lat = ref()   // 纬度
	const lon = ref()  // 经度
	const covers = ref([])  // 定位中心点
	const circles = ref([])  // 圆
	const locationAddress = ref('')  // 位置名称
	const locationLat =  ref() // 纬度 
	const locationLon = ref()  // 经度
	
	const state = reactive({
        titleStyle:{
            color:'$uni-text-color',
            fontWeight:700
        },
        bgColor:'#ffffff'
    })
	const text = ref('确认地址')
	// 确认地址
	const confirmLocation = () => {
		
		uni.navigateBack({
			delta:1,
			success:() => {
				uni.$emit('getAddress',{
					scope:clock_range.value,  //  打卡范围
					Address:locationAddress.value,  // 详细地址
					Lat:locationLat.value, // 纬度
					Lon:locationLon.value// 经度
				})
			}
		})
	}

	// 打卡范围
const show_range = ref(false)
const columns_data = ref([[100, 200, 300, 400, 500, 600, 700, 800, 900, 1000]]);
const close_range = () => {
	show_range.value = false
}
const cancel_range = () =>{
	show_range.value = false
}

const clock_range = ref('100')
const confirm_range = (e) => {
	clock_range.value = e.value.join(',')
	show_range.value = false;
};

// 跳转更改页
const alter = () => {
	sheep.$router.go('/subpackage/staff/project/change_location')
}

</script>

<style scoped lang="scss">
	.area {
		width: calc(100% - 60rpx);
		margin: 0 30rpx;
	}

	.max_box {
		width: 100%;
		height: 100%;
		position: relative;
		// 地图
		.map {
			width: 100%;
			height: 50vh;
		}
		// 选项盒子
		.operating_box {
			width: 100%;
			height: 42vh;
			background-color: #ffffff;
			position: absolute;
			top: 50vh;
			border-radius: 30rpx;
			padding-top: 30rpx;
			// 位置
			.location_box {
				height: 110rpx;
				margin-top: 50rpx;
				display: flex;
				justify-content: space-between;
				border-bottom: 2rpx solid #bdbbbb;
				// 地址
				.site {
					width: 80%;
					height: calc(100% - 10rpx);
					color: #555;
					font-size: 26rpx;
					padding-right: 20rpx;
					padding-top: 10rpx;
				}
				// 更改
				.alter {
					width: 20%;
					height: 100%;
					display: flex;
					justify-content: flex-end; /* 将子元素靠右对齐 */
					// 按钮
					.alter_button {
						border: 2rpx solid #999;
						border-radius: 50rpx;
						line-height: 50rpx;
						text-align: center;
						width: 100rpx;
						height: 50rpx;
						color: #000;
						font-size: 26rpx;
						font-weight: $uni-font-weight;
					}
				}
			}
			// 范围
			.scope {
				height: 200rpx;
				margin-top: 40rpx;
				.scope_title {
					margin-bottom: 30rpx;
					color: #555;
				}
				.scope_select {
					height: 100rpx;
					background-color: #f6f4f4;
					border-radius: 30rpx;
					display: flex;
					justify-content: space-between;
					padding: 0 20rpx;
					text {
						line-height: 100rpx;
					}
				}
			}
		}
		
	}
	// 输入框 外框
	.input_search {
	width: 93%;
	margin: 20rpx auto;
	height: 58rpx;
	border-radius: 36rpx;
	background-color: #F4F4F4;
	display: flex;
	padding: 7rpx 7rpx;
	.icon {
		display: inline-block;
		width: 100rpx;
		height: 100rpx;
	}
	.up-input {
		margin-left: 50rpx;
	}
	.button {
		width: 150rpx;
		height: 60rpx;
		border-radius: 16px;
		background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
		text-align: center;
		line-height: 60rpx;
		font-family: PingFangSC;
		color: #FFFFFF;
		font-weight: 500;
		font-size: 30rpx;
		font-style: normal;
		text-decoration: none;
	}
}
</style>